<template>
  <div class="home">
    <div class="carousel">
      <mt-swipe :auto="4000" continuous>
        <mt-swipe-item>
          <router-link to>
            <img src="../assets/images/banner1.png" alt>
          </router-link>
        </mt-swipe-item>
        <mt-swipe-item>
          <router-link to>
            <img src="../assets/images/banner2.png" alt>
          </router-link>
        </mt-swipe-item>
        <mt-swipe-item>
          <router-link to>
            <img src="../assets/images/banner3.png" alt>
          </router-link>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="navbar">
      <ul>
        <li>
          <router-link to>
            <img src="../assets/images/nav1.png" alt>
          </router-link>
        </li>
        <li>
          <router-link to>
            <img src="../assets/images/nav2.png" alt>
          </router-link>
        </li>
        <li>
          <router-link to>
            <img src="../assets/images/nav3.png" alt>
          </router-link>
        </li>
        <li>
          <router-link to>
            <img src="../assets/images/nav5.png" alt>
          </router-link>
        </li>
        <li>
          <router-link to>
            <img src="../assets/images/nav4.png" alt>
          </router-link>
        </li>
        <li>
          <router-link to>
            <img src="../assets/images/nav1.png" alt>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="product clearfix">
      <router-link to="">
        <img src="../assets/images/product.jpg" alt>
        <div class="productDes">请不要买，不要买，要买，买。买，要买，必须买，全部买，买买买。淘淘淘</div>
        <div>
          <span class="newPrice">￥200.00</span>
          <span class="oldPrice">￥300.00</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
       <router-link to="">
        <img src="../assets/images/product.jpg" alt>
        <div class="productDes">请不要买，不要买，要买，买。买，要买，必须买，全部买，买买买。淘淘淘</div>
        <div>
          <span class="newPrice">￥200.00</span>
          <span class="oldPrice">￥300.00</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
       <router-link to="">
        <img src="../assets/images/product.jpg" alt>
        <div class="productDes">请不要买，不要买，要买，买。买，要买，必须买，全部买，买买买。淘淘淘</div>
        <div>
          <span class="newPrice">￥200.00</span>
          <span class="oldPrice">￥300.00</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
       <router-link to="">
        <img src="../assets/images/product.jpg" alt>
        <div class="productDes">请不要买，不要买，要买，买。买，要买，必须买，全部买，买买买。淘淘淘</div>
        <div>
          <span class="newPrice">￥200.00</span>
          <span class="oldPrice">￥300.00</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
       <router-link to="">
        <img src="../assets/images/product.jpg" alt>
        <div class="productDes">请不要买，不要买，要买，买。买，要买，必须买，全部买，买买买。淘淘淘</div>
        <div>
          <span class="newPrice">￥200.00</span>
          <span class="oldPrice">￥300.00</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
       <router-link to="">
        <img src="../assets/images/product.jpg" alt>
        <div class="productDes">请不要买，不要买，要买，买。买，要买，必须买，全部买，买买买。淘淘淘</div>
        <div>
          <span class="newPrice">￥200.00</span>
          <span class="oldPrice">￥300.00</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home {
  padding-bottom: 66px;
  overflow: scroll;
  .mint-swipe {
    height: 230px;
       img {
      width: 100%;
      display: block;
      height: 100%;
    }

  }
  .navbar {
    // margin: 15px;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 33.33%;
        padding: 4px;
        a{
          display: block;
            img {
          display: block;
          width: 100%;
        }
        }
      }
    }
  }
  .product {
    .router-link-active {
        &:nth-child(even){
             margin-left: 2%;
        }
    text-decoration: none;
    float: left;
      width: 49%;
      padding: 10px;
      border: 1px solid #eee;
      color: #000;
    margin-top: 5px;
      img {
        display: block;
        width: 100%;
      }
      .productDes {
        font-size: 13px;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 5px;
      }
      .newPrice {
        color: red;
        font-size: 15px;
        padding-right: 10px;
      }
      .oldPrice {
        font-size: 13px;
      }
      .mint-button {
          display: block;
          margin: 0 auto;
          font-size:14px;
          height: 30px;
          line-height: 1;
          margin-top: 10px;
        //margin-top:20px ;
      }

    }
  }
}
</style>
